import React, {Component} from 'react';

import PropTypes from 'prop-types';

export default class Search extends Component {

    static propTypes = {
        searchName: PropTypes.func.isRequired,
    }

    handleSearch = () => {
        var value = this.searchInput.value.trim();
        if (value) {
            this.props.setSearchName(value);

        }
        this.searchInput.value = ""
    }

    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input ref={input => this.searchInput = input} type="text" placeholder="enter the name you search"/>
                    <button onClick={this.handleSearch}>Search</button>
                </div>
            </section>
        )
    }
}
